<template>
  <div class="support-box">
    <div>
      <el-descriptions title="（1）支援和计划支援西藏昌都建设" :column="4" border>
        <el-descriptions-item :label="`${examineYear}年度是否支援西藏昌都建设/是否计划 ${examineYear - (-1)} 年度支援西藏昌都建设`">
          <el-switch inline-prompt v-model="radio1" disabled active-text="是" inactive-text="否"> </el-switch>
        </el-descriptions-item>
      </el-descriptions>
      <div class="list-con-box">
        <div class="single-list" v-for="item in myTibet">
          <el-radio-group v-model="item.supportYear" disabled>
            <el-radio :label="examineYear">{{ `${examineYear}年开展` }}</el-radio>
            <el-radio :label="examineYear - (-1)">{{ `${examineYear - (-1)}年计划开展` }}</el-radio>
          </el-radio-group>
          <p>项目名称：{{ item.thenProjectName }}</p>
          <p>项目支出：人民币 {{ item.thenProjectExpenditure }}元</p>
          <p>受益建档立卡贫困户：{{ item.thenBenefitNum }}户，{{ item.thenBenefitUserNum }}人</p>
          <p>项目受益地点：{{ item.thenBenefitAddress }}</p>
          <div class="pro-type">
            项目类别：
            <el-checkbox-group v-model="item.thenProjectTypes" disabled>
              <el-checkbox v-for="innerItem in dictZYXZ" :value="innerItem.id" :label="innerItem.id" disabled>{{
                innerItem.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <p>项目内容：{{ item.thenProjectConcent }}</p>
        </div>
      </div>
    </div>
    <div>
      <el-descriptions title="（2）参与和计划乡村振兴工作情况" :column="4" border>
        <el-descriptions-item :label="`${examineYear}年度是否参与乡村振兴工作/是否计划${examineYear - (-1)}年度参与有关工作`">
          <el-switch inline-prompt v-model="radio2" disabled active-text="是" inactive-text="否"> </el-switch>
        </el-descriptions-item>
      </el-descriptions>

      <div class="list-con-box">
        <div class="single-list" v-for="item in myVillage">
          <el-radio-group v-model="item.supportYear" disabled>
            <el-radio :label="examineYear">{{ `${examineYear}年开展` }}</el-radio>
            <el-radio :label="examineYear - (-1)">{{ `${examineYear - (-1)}年计划开展` }}</el-radio>
          </el-radio-group>
          <p>项目名称：{{ item.thenProjectName }}</p>
          <p>项目支出：人民币 {{ item.thenProjectName }}元</p>
          <p>受益建档立卡贫困户：{{ item.thenBenefitNum }}户，{{ item.thenBenefitUserNum }}人</p>
          <p>项目受益地点：{{ item.thenBenefitAddress }}</p>
          <div class="pro-type">项目类别：
            <el-checkbox-group v-model="item.thenProjectTypes" disabled>
              <el-checkbox :value="innerItem.id" :key="innerItem.id" v-for="innerItem in dictXCZX"
                :label="innerItem.id">{{ innerItem.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <p>项目内容：{{ item.thenProjectName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { getDictZJ, getDictXCZX } from '@/api/dict/index'
const radio1 = ref(true)
const radio2 = ref(false)

let dictZYXZ = ref([])
let dictXCZX = ref([])
let currentYear = ref('')
let lastYear = ref('')
let myVillage = ref([])
let myTibet = ref([])
let examineYear = ref()
const { getDetailInfo } = inject('getDetailInfo')

getDetailInfo().then(res => {
  examineYear.value = res.examineYear
  const { tibet, village } = res.data
  myTibet.value = tibet && tibet.map(item => {
    return { ...item, thenProjectTypes: JSON.parse(item.thenProjectTypes) }
  })
  myVillage.value = village && village.map(item => {
    return { ...item, thenProjectTypes: JSON.parse(item.thenProjectTypes) }
  })
  radio1.value = tibet && tibet.length ? true : false
  radio2.value = village && village.length ? true : false
})

const getDict = () => {
  getDictZJ().then(res => {
    dictZYXZ.value = res.data
  })
  getDictXCZX().then(res => {
    dictXCZX.value = res.data
  })
}

const getYear = () => {
  currentYear = new Date().getFullYear();
  lastYear = currentYear - 1;
}
getYear()
getDict()
</script>
<style lang="scss" scoped>
.list-con-box {
  padding: 20px;

  .single-list {
    border: 1px solid #000;
    padding: 20px;
    margin-bottom: 10px
  }
}

.pro-type {
  display: flex;
  align-items: center;
}
</style>
